<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<body>
<div id="app">
  <el-container>
    <el-header style="background-color: #0096dc">
      <h1 style="color: white;font-size: 22px">
        CoolShark商城后台管理系统
        <span style="float: right">
          欢迎{{user.nickname}}回来
          <a href="javascript:void (0)" @click="exit()">退出登录</a>
        </span>
      </h1>
    </el-header>
    <el-container>
      <el-aside width="200px" style="overflow: hidden">
        <el-menu @select="handleSelect">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-s-flag"></i>
              <span>分类管理</span>
            </template>
            <el-menu-item index="1-1">分类列表</el-menu-item>
            <el-menu-item index="1-2">添加分类</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-picture"></i>
              <span>轮播图管理</span>
            </template>
            <el-menu-item index="2-1">轮播图列表</el-menu-item>
            <el-menu-item index="2-2">添加轮播图</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title"><i class="el-icon-shopping-cart-2"></i>
              <span>商品管理</span>
            </template>
            <el-menu-item index="3-1">商品列表</el-menu-item>
            <el-menu-item index="3-2">添加商品</el-menu-item>
          </el-submenu>
        </el-menu>

      </el-aside>
      <el-main>
        <!--分类表格开始-->
        <el-table v-if="currentIndex=='1-1'" :data="categoryArr">
          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column label="分类名称" prop="name"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                      size="mini"
                      type="success"
                      @click="handleCategoryUpdate(scope.$index, scope.row)">修改</el-button>
              <el-button
                      size="mini"
                      type="danger"
                      @click="handleCategoryDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分类表格结束-->
        <!--轮播图表格开始-->
        <el-table v-if="currentIndex=='2-1'" :data="bannerArr">
          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column label="轮播图" width="100px">
            <template slot-scope="scope">
             <img :src="scope.row.url" width="100%">
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                      size="mini"
                      type="success"
                      @click="handleBannerUpdate(scope.$index, scope.row)">修改</el-button>
              <el-button
                      size="mini"
                      type="danger"
                      @click="handleBannerDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--轮播图表格结束-->
        <!--商品表格开始-->
        <el-table v-if="currentIndex=='3-1'" :data="productArr">
          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column label="商品标题" prop="title"></el-table-column>
          <el-table-column label="商品价格" prop="price"></el-table-column>
          <el-table-column label="商品原价" prop="oldPrice"></el-table-column>
          <el-table-column label="商品库存" prop="num"></el-table-column>
          <el-table-column label="商品图片" width="100px">
            <template slot-scope="scope">
              <img :src="scope.row.url" width="100%">
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                      size="mini"
                      type="success"
                      @click="handleProductUpdate(scope.$index, scope.row)">修改</el-button>
              <el-button
                      size="mini"
                      type="danger"
                      @click="handleProductDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--商品表格结束-->
      </el-main>
    </el-container>
  </el-container>

</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script>
 let v = new Vue({
    el: '#app',
    data: function() {
      return {
        user:{},
        currentIndex:"1-1",
        productArr:[],
        categoryArr:[],
        bannerArr:[]

      }
    },
   methods:{
      exit(){
        axios.post("/exit").then(function (response) {
          location.reload();
        })
      },
     handleCategoryUpdate(i,c){
        let name=prompt("请输入新的分类名称")
       if(name==null){
         return;
       }
       if(name.trim()==""){
         v.$message.error("请输入新的分类名称")
         return;
       }
       axios.post("/category/update",{id:c.id,name:name}).then(function () {
         c.name=name;
       })
       //发出修改异步请求
     },
     handleSelect(key,keyPath){
       //key就是导航菜单项的index的值
       if (key=='1-2'){
         let name=prompt("请输入分类的名称");
         if(name==null){
           return;
         }
         if(name.trim()==""){
           v.$message.error("请输入分类的名称");
           return;
         }
         axios.post("/category/insert?name="+name).then(function () {
           location.reload();
         })

       }else if(key=='2-2'){
         location.href="insertBanner.html";
       }else if(key=='3-2'){
         location.href="insertProduct.html";
       }else{//1-1 , 2-1, 3-1
         v.currentIndex = key;
       }
     },
     handleCategoryDelete(i,c){
       if(confirm("您确认要删除吗？")) {
         axios.post("/category/deleteById?id=" + c.id).then(function (response) {
           v.categoryArr.splice(i,1);
           v.$message.success("成功删除了"+c.name);
         })
       }

     },
     handleBannerUpdate(i,b){
        location.href="/updateBanner.html?id="+b.id;
     },
     handleBannerDelete(i,b){
       if(confirm("您确认要删除吗？")) {
         axios.post("/banner/deleteById?id=" + b.id).then(function (response) {
           v.bannerArr.splice(i,1);
           v.$message.success("成功删除了轮播图");
         })
       }
     },
     handleProductUpdate(i,p){
        location.href="/updateProduct.html?id="+p.id;
     },
     handleProductDelete(i,p){
       if(confirm("您确认要删除吗？")) {
         axios.post("/product/deleteById?id=" + p.id).then(function (response) {
           v.productArr.splice(i,1);
           v.$message.success("成功删除了"+p.title);
         })
       }
     },
   },
   created:function () {
      axios.get("/currentUser").then(function (response) {
        v.user=response.data;

      })
     axios.get("/category/select").then(function (response) {
       v.categoryArr=response.data;
     })
     axios.get("/banner/select").then(function (response) {
       v.bannerArr=response.data;
     })
     axios.get("/product/select").then(function (response) {
       v.productArr=response.data;
     })
   }
  })
</script>
</html>